import React, { useState } from "react";
import cls from "@/styles/pages/users/CreateUser.module.scss";
import { UserI } from "@/models/user";
import { CreateUserAvatar } from "@/feature/CreateUser/CreateUserAvatar/CreateUserAvatar";
import CreateUserForm from "@/feature/CreateUser/CreateUserForm/CreateUserForm";
import { createUser } from "@/api/users";
import { useNavigate } from "react-router-dom";

const initialData: Partial<UserI> = {
  first_name: "",
  second_name: "",
  last_name: "",
  user_permissions: [],
};

const CreateUser = () => {
  const [user, setUser] = useState<Partial<UserI>>(initialData);
  const updateUser = (v: Partial<UserI>) => {
    setUser((p) => ({ ...p, ...v }));
  };
  const navigate = useNavigate();
  const onSave = async () => {
    try {
      createUser(user).then((res) => navigate("/users"));
    } catch (e) {
      console.log({ error: e });
    }
  };
  return (
    <div className={cls.root}>
      <div className={cls.block}>
        <CreateUserAvatar user={user} updateUser={updateUser} />
      </div>
      <div className={cls.block}>
        <CreateUserForm user={user} updateUser={updateUser} onSave={onSave} />
      </div>
    </div>
  );
};

export default CreateUser;
